<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <!-- 9给比较常用的按键修饰符
            .enter
            .tab
            .delete (捕获“删除”和“退格”键)
            .esc
            .space
            .up
            .down
            .left
            .right
     怎么获取某个键的按键修饰符?
        第一步:通过 event.key 获取到这个键的真实名字，
        第二步:将这个真实名字以kebab-case风格进行命名
            比如: PageDown是真实名字,经过命名之后: page-down(小写)
        按键修饰符是可以自定义的？
            通过Vue的全局配置对象cofig来进行按键修饰符的自定义
                语法规则:
                Vue.config.keyCodes.按键修饰的名字 = 键值
                系统修饰键: 4个比较特殊的键
                ctrl,alt,shift,meta
                对于keydown事件来说，只要按下ctrl键,keydown事件就会触发
                对于keyup事件来说，需要按下ctrl键，并且加上按下组合键，然后松开组合键之后，
                keyup事件才能触发
    -->

    <div id="app">
        <h1>{{msg}}</h1>
        回车键: <input type="text" @keyup.enter="getInfo"><br>
        回车键(键值): <input type="text" @keyup.13="getInfo"><br>
        delete键: <input type="text" @keyup.delete="getInfo"><br>
        esc键: <input type="text" @keyup.esc="getInfo"><br>
        space键: <input type="text" @keyup.space="getInfo"><br>
        up键:<input type="text" @keyup.up="getInfo"><br>
        down键:<input type="text" @keyup.down="getInfo"><br>
        left键:<input type="text" @keyup.left="getInfo"><br>
        right键:<input type="text" @keyup.right="getInfo"><br>
        <!-- 注意: tab键无法触发 keyup 事件，只能触发 keydown 事件 -->
        <!-- tab键:<input type="text" @keyup.tab="getinfo"> -->
        tab键(keydown): <input type="text" @keydown.tab="getInfo"><br>
        PageDown键: <input type="text" @keyup.page-down="getInfo"><br>
        huiche键: <input type="text" @keyup.huiche="getInfo"><br>
        ctrl键(keydwon): <input type="text" @keydown.ctrl="getInfo"><br>
        ctrl键(keyup): <input type="text" @keyup.ctrl="getInfo"><br>
        <!-- 表示只有当按下 ctrl + i 的时候才有效果 -->
        ctrl键(keyup+i): <input type="text" @keyup.ctrl.i="getInfo"><br>
      
    </div>
    <script>

        // 自定义一个按键修饰符：.huiche 代表回车键
        Vue.config.keyCodes.huiche = 13

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '按键修饰符'
            },
            methods: {
                getInfo(event) {
                    // 当用户键入回车键的时候，获取用户输入的信息
                    /*  if(event.keyCode === 13) {
                         console.log(event.target.value)
                     } */
                    //  event.preventDefault()

                    console.log(event.target.value)
                    console.log(event.key)
                }
            }
        })
    </script>

</body>

</html>